﻿<phone:PhoneApplicationPage 
    x:Class="Sabang.Quran"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
    shell:SystemTray.IsVisible="True" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch">

    <toolkit:TransitionService.NavigationInTransition>
        <toolkit:NavigationInTransition>
            <toolkit:NavigationInTransition.Backward>
                <toolkit:TurnstileTransition Mode="BackwardIn"/>
            </toolkit:NavigationInTransition.Backward>
            <toolkit:NavigationInTransition.Forward>
                <toolkit:TurnstileTransition Mode="ForwardIn"/>
            </toolkit:NavigationInTransition.Forward>
        </toolkit:NavigationInTransition>
    </toolkit:TransitionService.NavigationInTransition>
    <toolkit:TransitionService.NavigationOutTransition>
        <toolkit:NavigationOutTransition>
            <toolkit:NavigationOutTransition.Backward>
                <toolkit:TurnstileTransition Mode="BackwardOut"/>
            </toolkit:NavigationOutTransition.Backward>
            <toolkit:NavigationOutTransition.Forward>
                <toolkit:TurnstileTransition Mode="ForwardOut"/>
            </toolkit:NavigationOutTransition.Forward>
        </toolkit:NavigationOutTransition>
    </toolkit:TransitionService.NavigationOutTransition>
    
    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Grid Margin="5,0,5,5">
                <Grid.ColumnDefinitions>
                <ColumnDefinition Width="95"></ColumnDefinition>
                <ColumnDefinition Width="*"></ColumnDefinition>
                    <ColumnDefinition Width="95"></ColumnDefinition>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                </Grid.ColumnDefinitions>
            
            <!-- Grid for Sura Number -->
            <Grid Grid.Column="0">
                <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"></ColumnDefinition>
                <ColumnDefinition Width="*"></ColumnDefinition>
                <ColumnDefinition Width="*"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <Button Grid.Column="0" Padding="0" BorderThickness="0" Foreground="White" Background="Black" FontSize="15"
                    VerticalAlignment="Top"  HorizontalAlignment="Center" Height="50" Width="50" Name="btnPlus" Click="btnPlus_Click">+</Button>
            <TextBox Grid.Column="1" Text="1" FontSize="15" Width="55" Name="tbSura" BorderThickness="0"
                     Height="50" LostFocus="tbSura_LostFocus" Background="White" 
                     Foreground="Black" HorizontalAlignment="Center" VerticalAlignment="Center" ></TextBox>
                <Button Grid.Column="2" VerticalAlignment="Top"  HorizontalAlignment="Center"
                        Padding="0" BorderThickness="0" Foreground="White" Background="Black"
                        FontSize="15" Height="50" Width="50" Name="btnMin" Click="btnMin_Click">-</Button>
            </Grid>

            <!-- Grid for Sura Name -->
            <Grid Name="controlGrid" Grid.Column="1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="25" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <!-- Red column -->
                <TextBlock Name="tbSuraName" HorizontalAlignment="Center" Grid.Column="1"
                           Grid.Row="0" Text="Blah" FontSize="20" VerticalAlignment="Top" FontWeight="Bold"/>
                <Slider VerticalAlignment="Top" Name="redSlider" Grid.Column="1" Grid.Row="1"
Foreground="Yellow"  Minimum="1" Maximum="114" ValueChanged="redSlider_ValueChanged"
                        Margin="5,-20,5,0" Height="90"/>
            </Grid>

            <!-- Grid for Sura Number -->
            <Grid Grid.Column="2">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <Button Grid.Column="0" Padding="0" BorderThickness="0" Foreground="White" Background="Black" FontSize="15"
                    VerticalAlignment="Top"  HorizontalAlignment="Center" Height="50" Width="50" Name="btnPagePlus" Click="btnPlus_Click">+</Button>

                <TextBox Grid.Column="1" Text="1" FontSize="15" Width="55" Name="tbPage" BorderThickness="0"
                     Height="50" LostFocus="tbPage_LostFocus" VerticalAlignment="Center" Background="White" Foreground="Black"></TextBox>
                <Button Grid.Column="2" VerticalAlignment="Top"  HorizontalAlignment="Center"
                        Padding="0" BorderThickness="0" Foreground="White" Background="Black"
                        FontSize="15" Height="50" Width="50" Name="btnPageMin" Click="btnMin_Click">-</Button>
            </Grid>
        </Grid>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="5,0,5,0">
            <Grid.Resources>
                <Style x:Key="paragraphStyle" TargetType="TextBlock">
                    <Setter Property="TextWrapping" Value="Wrap" />
                    <Setter Property="Margin" Value="5" />
                    <Setter Property="FontSize" Value="30"/>
                    <Setter Property="FontFamily" Value="/Fonts/me_quran_volt_newmet.ttf#me_quran"></Setter>
                    <Setter Property="HorizontalAlignment" Value="Stretch"></Setter>
                    <Setter Property="FlowDirection" Value="RightToLeft"></Setter>
                    <Setter Property="TextAlignment" Value="Justify"></Setter>
                    <Setter Property="Foreground" Value="Yellow"></Setter>
                    <!--<Setter Property="Padding" Value="5"></Setter>-->
                    
                    <Setter Property="FontWeight" Value="Bold"></Setter>
                </Style>
            </Grid.Resources>
            <!--<Border Background="Black"
BorderBrush="White"
BorderThickness="5">
                <Border.Child>-->
                    <ScrollViewer Padding="5">
                <StackPanel>
 
                        <TextBlock Style="{StaticResource paragraphStyle}" Name="Aya" ManipulationCompleted="Aya_ManipulationCompleted" ManipulationStarted="Aya_ManipulationStarted">
                        </TextBlock>
                       
                </StackPanel>
            </ScrollViewer>
                <!--</Border.Child>
            </Border>-->
        </Grid>
    </Grid>
 
    <!--Sample code showing usage of ApplicationBar-->
    <!--<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="Images/index.png" Text="Index"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="Index"/>
                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>-->

</phone:PhoneApplicationPage>
